<template>
	<view class="item">
		<!-- <video :id="videoId" ref="videoRef" class="video" :src="src" :poster="poster" :autoplay="autoplay" :muted="muted" :loop="true" :controls="false" object-fit="cover" show-mute-btn="false" /> -->
		<!-- 触控层：用于区分单击/双击，并在双击时生成爱心 -->
		<view class="touch-layer" @touchend="onTouchEnd"></view>
		<!-- 漂浮爱心 -->
		<view v-for="h in hearts" :key="h.id" class="heart" :style="{ left: h.x + 'px', top: h.y + 'px', transform: `rotate(${h.rotate}deg)` }"></view>
		<VideoActions :avatar="avatar" :like="likeCount" :comment="comment" :star="starCount" :share="share" :liked="liked" />
		<VideoMeta :author="author" :desc="desc" />
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import VideoActions from '@/components/VideoActions.vue'
import VideoMeta from '@/components/VideoMeta.vue'
const props = defineProps({
	src: { type: String, default: '' },
	poster: { type: String, default: '' },
	autoplay: { type: Boolean, default: true },
	muted: { type: Boolean, default: true },
	author: { type: String, default: '阿越美食' },
	desc: { type: String, default: '' },
	avatar: { type: String, default: '/static/logo.png' },
	like: { type: [Number,String], default: 5821 },
	comment: { type: [Number,String], default: 128 },
	star: { type: [Number,String], default: 4301 },
	share: { type: [Number,String], default: 1292 }
})

// 本地播放控制与点赞状态
const videoRef = ref(null)
const videoId = 'feedVideo'
let videoCtx = null
const isPaused = ref(false)
const liked = ref(false)
const likeCount = ref(Number(props.like) || 0)
const starCount = ref(Number(props.star) || 0)

// 单击/双击判定
let lastTap = 0
let singleTimer = null
const hearts = ref([])

onMounted(() => {
	// 小程序/APP 可用视频上下文；H5 直接使用 DOM
	try{ videoCtx = uni.createVideoContext && uni.createVideoContext(videoId) }catch(e){}
})

function togglePlay(){
	// 优先使用 DOM 控制（H5）
	if (videoRef.value && typeof videoRef.value.paused !== 'undefined') {
		if (videoRef.value.paused) { videoRef.value.play(); isPaused.value = false } else { videoRef.value.pause(); isPaused.value = true }
		return
	}
	// 兜底：使用上下文
	if (isPaused.value) { videoCtx?.play(); isPaused.value = false } else { videoCtx?.pause(); isPaused.value = true }
}

function doLikeAt(x, y){
	if (!liked.value) { liked.value = true; likeCount.value += 1 }
	const id = Date.now() + Math.random()
	const rotate = Math.random() * 40 - 20
	hearts.value.push({ id, x, y, rotate })
	setTimeout(() => { hearts.value = hearts.value.filter(h => h.id !== id) }, 900)
}

function onTouchEnd(e){
	const now = Date.now()
	const touch = e.changedTouches && e.changedTouches[0]
	const x = touch?.clientX || 0
	const y = touch?.clientY || 0
	if (now - lastTap < 260) {
		clearTimeout(singleTimer)
		doLikeAt(x, y)
		lastTap = 0
	} else {
		lastTap = now
		singleTimer = setTimeout(() => { togglePlay() }, 260)
	}
}
</script>

<style lang="scss" scoped>
.item{ position: relative; width: 100vw; height: 100vh; background:#000; overflow:hidden; }
.video{ width: 100%; height: 100%; pointer-events: none; }
.touch-layer{ position:absolute; left:0; right:0; top:0; bottom:0; z-index:2; }
.heart{ position:absolute; width: 72rpx; height: 72rpx; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff4155"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1.01 4.22 2.53C11.09 5.01 12.76 4 14.5 4 17 4 19 6 19 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') no-repeat center/contain; animation: fly .9s ease forwards; pointer-events:none; z-index:3; }
@keyframes fly{ 0%{ transform: translate3d(-50%, -50%, 0) scale(1) rotate(0); opacity:1 } 70%{ transform: translate3d(-50%, -140rpx, 0) scale(1.2) rotate(0); opacity:.9 } 100%{ transform: translate3d(-50%, -260rpx, 0) scale(1.2) rotate(0); opacity:0 } }
</style>


